<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性同步</title>
</head>
<body>
    <div id="app" class="red">houdunren.com</div>
    <input type="text" name="package" value="houdunren.com" />
    <script>
        // const app = document.querySelector('#app');
        // app.className = 'hdcms';
        // console.log(app.getAttribute('class'));//hdcms
        // app.setAttribute('class','blue');
        // console.log(app.className);

        //只使用value改变值的是偶不会同步到特征
        //下面对input值使用属性设置,但是并没有同步到特征
        // const package = document.querySelector(`[name="package"]`);
        // // package.setAttribute('value','hdcms.com');
        // package.value = 'hdcms.com';
        // //没有同步到特征
        // console.log(package.getAttribute('value'));


        //使用input的特征value会同步到DOM对象属性
        const package = document.querySelector(`[name='package']`);
        package.setAttribute('value','hdcms.com');
        console.log(package.getAttribute('value'));
        console.log(package.value);
    </script>
</body>
</html>